<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="Steper Kuo">
	<title>Priority when dynamic import js/css file</title>

	<!-- Style custom *** CSS -->
	<style type="text/css">
		/* Demo's CSS here */
		.font-color
		{
			color: white;
		}
	</style>
	<link data-toggle="previewCode" data-target="#cssCode" data-position="prepend" data-fetch="file" rel="stylesheet" href="style1-blue.css">

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

	<script type="text/javascript">
	  var aaa = 0;
	</script>
	<script data-toggle="previewCode" data-target="#jsCode" data-position="prepend" data-fetch="file" src="script1-hello.js"></script>

</head>
<body>

<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.js?type=split-ssc"></script>

<!-- Script Fundebug code *** JS -->
<script src="https://js.fundebug.cn/fundebug.0.3.6.min.js" apikey="f3b60739271056d85641a316cd13350f5960922b510427e3ec514bc3f0a74ac5"></script>


<main>

	<!-- Demos -->
	<section id="demos">
		<div class="row">
			<div id="demoWrap" class="large-12 columns">
				<h3 id="overview">Priority when dynamic import js/css file</h3>
				<h4>CSS: dynamic load style2-blue.css</h4>
				<br>
				<div class="bg-color font-color">Class: bg-color</div>
				<br>
				<button onclick="loadStyle2(true)">insert Before style1</button>
				<button onclick="loadStyle2(false)">insert After style1</button>

				<br>
				<h4>JS: dynamic load script2 hello function</h4>
				<button onclick="loadScript2(true)">insert Before script1</button>
				<button onclick="loadScript2(false)">insert After script1</button>
				<br>

				<h5><b>Conclusions</b></h5>
				<h5>1. The last css file in dom (add to dom) has the higher priority;<br>2. The sequence of js file in dom don't
					have an affect on override;</h5>

				<div id="cssCode">
					<div data-toggle="previewCode" data-title="style2-blue.css" data-fetch="file" data-src="style2-red.css"></div>
				</div>
				<div id="jsCode">
					<div data-toggle="previewCode" data-title="script2-hello.js" data-fetch="file" data-src="script2-hello.js"></div>
				</div>
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>

<!-- Script Demo *** JS -->
<script type="text/javascript">
	// Demo's JS here
	function loadStyle2(isFirst)
	{
		var styleId = 'style2';
		removeElement(styleId);
		loadStyleCustom('style2-red.css', styleId, isFirst);
	}

  function loadScript2(isFirst)
  {
  	var scriptId = 'script2';
	  removeElement(scriptId);
	  loadScriptCustom('script2-hello.js', scriptId, isFirst, function () {
		  hello();
	  });
  }

	function loadStyleCustom(src, id, isFirst)
	{
		var link = document.createElement("link");
		link.id = id;
		link.type = "text/css";
		link.rel = "stylesheet";
		link.href = src;
		if (isFirst)
		{
			var stag = document.getElementsByTagName("link")[0];
			stag.parentNode.insertBefore(link, stag);
		}
		else
		{
			document.getElementsByTagName('head')[0].appendChild(link);
		}
	}

	function loadScriptCustom(src, id, isFirst, callback)
	{
		var script = document.createElement("script");
		script.id = id;
		script.type = "text/javascript";
		script.onload = script.onreadystatechange = function (_, isAbort) {
			if (isAbort || !script.readyState || /loaded|complete/.test(script.readyState))
			{
				script.onload = script.onreadystatechange = null;
				script = undefined;

				if (!isAbort)
				{
					if (callback) callback();
				}
			}
		};
		if (isFirst)
		{
			var stag = document.getElementsByTagName("script")[0];
			stag.parentNode.insertBefore(script, stag);
		}
		else
		{
			document.getElementsByTagName('head')[0].appendChild(script);
		}
		script.src = src;
	}

	function removeElement(id)
	{
		var element = document.getElementById(id);
		element && element.parentNode.removeChild(element);
	}
</script>

</body>
</html>